﻿<style>
    #layout-task-right .layui-tab-content {
        top: 20px !important;
    }

    #layout-task-right .layui-table-cell {
        white-space: normal;
    }

    #layout-task-right .title {
        word-break: break-all;
    }
    .priority{
        border: 1px solid #428bca;;
        border-radius: 6px;
        padding: 5px;
        color: #428bca;
    }
    .deleteline{
        text-decoration: line-through;
        color: #bbb;
    }
    .fa-tasks{
        margin-right: 5px;
    }
</style>
<div>
    <div class="layui-row">
        <div class="layui-col-md9">
            <div class="layui-body-nav">任务 / 任务列表
                <a data-id="2"
                   class="layui-btn layui-btn-normal layui-btn-xs" onclick="$('#task-form').show();">新增任务</a>
            </div>
            <form class="layui-form layui-form-pane" id="task-form"
                  style="display: none;background-color: #fafafa;">
                <input type="hidden" name="id">
                <table style="width: 100%">
                    <tr>
                        <td width="100px" nowrap="">任务名</td>
                        <td style="width: 100%;"><input type="text" name="name" autocomplete="off"
                                                        placeholder="输入任务名" class="layui-input"></td>
                    </tr>
                    <tr>
                        <td>优先级</td>
                        <td>
                            <select name="priority" id="priority">
                                <option value="common">普通</option>
                                <option value="urgent">紧急</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>指派人</td>
                        <td>
                            <select name="toUserId" id="toUserId">
                                <option value="none">选择指派人</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>截至时间</td>
                        <td>
                            <input type="text" class="layui-input" id="time"
                                   name="time"
                                   placeholder="yyyy-MM-dd" value="">
                        </td>
                    </tr>
                    <tr>
                        <td>描述</td>
                        <td><textarea placeholder="请输入内容" class="layui-textarea" name="details"></textarea></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button class="layui-btn layui-btn-sm" lay-submit="task-add" lay-filter="task-add">添加任务
                            </button>
                            <button class="layui-btn layui-btn-sm" type="button" onclick="cancelTask();">取消
                            </button>
                        </td>
                    </tr>
                </table>
            </form>
            <table class="layui-hide" id="table-worktask" lay-filter="table-worktask"></table>
        </div>
        <div class="layui-col-md3" style="position: relative" id="layout-task-right">
            <div style="height: 150px;">
                <table style="width: 100%;text-align: left;">
                    <tr>
                        <td class="tdr">任务名：</td>
                        <td id="task_name" class="tdl">
                        </td>
                    </tr>
                    <tr>
                        <td  class="tdr" >执行者：
                        </td>
                        <td id="task_user" class="tdl" ></td>
                    </tr>
                    <tr>
                        <td class="tdr">优先级：
                        </td>
                        <td id="task_priority" class="tdl"></td>
                    </tr>
                    <tr>
                        <td class="tdr" nowrap="" style="width: 90px;">截至时间：
                        </td>
                        <td id="task_endDate" class="tdl" style="width: 100%;"></td>
                    </tr>
                    <tr>
                        <td class="tdr">上传附件：
                        </td>
                        <td class="tdl">
                            <button type="button" class="layui-btn layui-btn-xs" id="test4"><i class="layui-icon">
                                &#xe67c;</i>上传附件
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdr" style="vertical-align: top;">描述：
                        </td>
                        <td id="task_details" class="tdl" style="word-break: break-all;font-size: 12px;"></td>
                    </tr>
                </table>
            </div>
            <div style="position: relative;">
                <div class="layui-tab" style="margin: 0px;top: 20px;">
                    <ul class="layui-tab-title">
                        <li class="layui-this">讨论</li>
                        <li>日志</li>
                        <li>附件</li>
                    </ul>
                    <div class="layui-tab-content" style="padding: 10px 0;">
                        <div class="layui-tab-item layui-show" style="padding-top: 13px;">
                            <table style="width: 100%;">
                                <tr>
                                    <td style="width: 100%;">
                                        <textarea name="desc" id="comment" style="min-height: 40px;height: 40px;padding: 0px;"
                                                  placeholder="请输入内容" class="layui-textarea"></textarea>
                                    </td>
                                    <td >
                                        <button style="height: 40px;" class="layui-btn layui-btn-warm layui-btn-sm" id="comment-btn">发布
                                        </button>
                                    </td>
                                </tr>
                            </table>
                            <table class="layui-hide" id="table-taskcomment" lay-filter="table-taskcomment"></table>
                        </div>
                        <div class="layui-tab-item" style="padding-top: 13px;">
                            <table class="layui-hide" id="table-tasklog" lay-filter="table-tasklog"></table>
                        </div>
                        <div class="layui-tab-item" style="padding-top: 13px;">
                            <table class="layui-hide" id="table-taskattach" lay-filter="table-taskattach"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- layui规范化用法 -->
<script type="text/javascript">
    var table = null;
    var taskId = null;
    var upload = null;
    var toUserId = 0;
    var form;
    /*菜单*/
    workUtils.onclick(".layui-icon-menu", function (c) {
        $(".widget-menu").hide();
        $(c).next().toggle();
        return false;
    });

    function cancelTask() {
        $('#task-form').hide();
        $("[name='details']").val("");
        $("[name='time']").val("");
        $("[name='name']").val("");
    }

    /*绑定下载按钮事件*/
    $(document).on("keyup", "#comment", function () {
        var val = $("#comment").val();
        if (val.length == 0) {
            toUserId = 0;
        }
    });
    /*绑定下载按钮事件*/
    workUtils.onclick(".taskattach-down", function (c) {
        var id = $(c).attr("data-id");
        location.href = "../task/downattach/" + id;
    });
    /*绑定任务编辑*/
    workUtils.onclick(".action-taskedit", function (c) {
        var id = $(c).data("id");

        $.getJSON("../task/get/" + id, function (data) {
            $("[name='name']").val(data.name);
            $("[name='id']").val(data.id);
            $("[name='priority']").val(data.priority);
            $("[name='details']").val(data.details);
            $("[name='toUserId']").val(data.toUserId);
            $("[name='time']").val(workUtils.toDate(data.endDate,"yyyy-MM-dd"));
            form.render("select");
            $('#task-form').show();
        });
    });
    /*绑定任务结束*/
    workUtils.onclick(".action-taskend", function (c) {
        var id = $(c).attr("data-id");
        workUtils.delete('../task/end/' + id, function () {
            loadDefaultData();
        },"确定结束任务吗")
    });
    workUtils.onclick(".action-taskdelete", function (c) {
        var id = $(c).attr("data-id");
        workUtils.delete('../task/delete/' + id, function () {
            loadDefaultData();
        })
    });
    /*发表评论*/
    workUtils.onclick("#comment-btn", function () {
        var data = {
            toUserId: toUserId,
            taskId: taskId,
            content: $("#comment").val()
        };
        if (data.content.length == 0) {
            workUtils.msg("内容不能为空");
            return;
        }
        workUtils.ajaxPost('../task/addcomment', data, function (result) {
            $("#comment").val("");
            table.reload("table-taskcomment", {
                where: {
                    projectId: workUtils.get("projectId"),
                    taskId: taskId
                }
            });
        });
    });
    /**
     * 加载某个任内务
     */
    function loadOneTask(id) {
        taskId = id;
        workUtils.ajaxGet("../task/get/" + taskId, {}, function (data) {
            $("#task_name").text(data.name);
            $("#task_priority").text(data.priorityTxt);
            $("#task_user").text(data.toUserName);
            $("#task_endDate").text(workUtils.toDate(data.endDate));
            $("#task_details").text(data.details);
        });
        table.reload("table-taskcomment", {
            where: {
                projectId: workUtils.get("projectId"),
                taskId: taskId
            }
        });
        table.reload("table-tasklog", {
            where: {
                projectId: workUtils.get("projectId"),
                taskId: taskId
            }
        });
        table.reload("table-taskattach", {
            where: {
                projectId: workUtils.get("projectId"),
                taskId: taskId
            }
        });
    }

    /*刷新任务*/
    function loadDefaultData() {
        table.reload("table-worktask", {
            where: {
                projectId: workUtils.get("projectId"),
            }
        });
    }

    layui.use(['layer', 'table', 'upload', 'laydate', 'form'], function () {
        var laydate = layui.laydate;
        form = layui.form;
        table = layui.table;
        upload = layui.upload;

        upload.render({ //允许上传的文件后缀
            elem: '#test4'
            , url: '../project/upload/file'
            , accept: 'file' //普通文件
            , size: 9086
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                this.data = {
                    projectId: workUtils.get("projectId"),
                    taskId: taskId
                };
                layer.load(); //上传loading
            }
            , done: function (res) {
                table.reload("table-taskattach", {
                    where: {
                        projectId: workUtils.get("projectId"),
                        taskId: taskId
                    }
                });
                table.reload("table-tasklog", {
                    where: {
                        projectId: workUtils.get("projectId"),
                        taskId: taskId
                    }
                });
                layer.closeAll('loading'); //关闭loading
            }
        });

        form.render('select'); //这个很重要
        form.on('submit(task-add)', function (data) {
            var index = layer.load(1);
            setTimeout(function () {
                data.field.projectId = workUtils.get("projectId");
                workUtils.ajaxPost('../task/add', data.field, function (result) {
                    layer.close(index);
                    loadDefaultData();
                    cancelTask();
                    workUtils.msg(result);
                });
            }, 400);
            return false;
        });

        //常规用法
        laydate.render({
            elem: '#time',
            type: 'date',
            format: 'yyyy-MM-dd',
            value: workUtils.getNowDate()
        });

        function loadProjectUsers() {
            workUtils.ajaxGet("../project/projectuser", {
                projectId: workUtils.get("projectId")
            }, function (data) {
                var optionstring = "";
                $.each(data, function (i, item) {
                    optionstring += "<option value=\"" + item.user.id + "\" >" + item.user.name + "</option>";
                });
                $("#toUserId").html('<option value=""></option>' + optionstring);
                form.render('select'); //这个很重要
            });
        };

        loadProjectUsers();

        table.render({
            elem: '#table-worktask'
            , url: '../task/list'
            , height: 'full-145'
            , cols: [[
                {field: 'name', title: '标题', width: 'auto', event: 'edit'}
            ]]
            , where: {
                projectId: workUtils.get("projectId")
            }
            , page: {
                layout: ['prev', 'next'],
                prev: '上一页',
                next: '下一页',
            }
            , cell: function (field, item) {
                if (field == "endDate") {
                    return workUtils.toDate(item.endDate);
                }  else if (field == "name") {
                    var html = '<div class="title '+(item.done?'deleteline':'')+'"><i class="fa fa-tasks"></i>' + item.name + '</div>';
                    html += '<div class="layui-row">';
                    html += '<div class="layui-col-md8">';
                    html += '<span style="color: #428bca;">'+item.fromUserName+'</span> 指派给 ';
                    html += '<span style="color: #428bca;">'+item.toUserName +'</span> <span class="priority">'+item.priorityTxt+'</span>';
                    html += '</div>';
                    html += '<div class="layui-col-md4  menu-bars">';
                    html += '<i class="fa fa-cog layui-icon-menu"></i>  ';
                    html += '<dl class="widget-menu">';
                    if(item.hasRole){
                        html += '<dd  data-id="' + item.id + '" class="action-taskedit">编辑任务</dd> ';
                        html += '<dd  data-id="' + item.id + '" class="action-taskdelete">删除任务</dd> ';
                    }
                    html += '<dd  data-id="' + item.id + '" class="action-taskend">完成任务</dd> ';
                    html += '</dl>';
                    html += '<i class="fa fa-clock-o"></i>';
                    html += workUtils.toDate(item.created,'yyyy-MM-dd hh');
                    html += '</div>';
                    html += '</div>';
                    return html;
                }
                return item[field];
            }
        });
        //监听工具条
        table.on('tool(table-worktask)', function (obj) {
            var data = obj.data;
            loadOneTask(data.id);
        });
        table.on('tool(table-taskcomment)', function (obj) {
            var data = obj.data;
            toUserId = data.fromUser.id;
            $("#comment").val('@' + data.fromUser.name + ' ');
        });
        table.render({
            elem: '#table-taskcomment'
            , url: '../task/listcomment'
            , height: 'full-348'
            , cols: [[
                {field: 'name', title: '标题', width: 'auto', event: 'edit'}
            ]]
            , where: {
                taskId: taskId
            }
            , page: {
                layout: ['prev', 'next'],
                prev: '上一页',
                next: '下一页',
            }
            , cell: function (field, item) {
                var html = '';
                html += '<div class="layui-row">';
                html += '<div class="layui-col-md2">';
                html += '<img src="../photo/get/' + item.fromUser.id + '"  class="layui-nav-img user-photo" style="width: 32px;height: 32px;">';
                html += '<div style="font-size: 10px;">' + item.fromUser.name + '</div>';
                html += '</div>';
                html += '<div class="layui-col-md10" style="background-color: #fafafa;min-height: 47px;">';
                html += '<div style="font-size: 10px;">';
                html += workUtils.toDate(item.created, 'yyyy-MM-dd hh');
                if (item.toUser != null) {
                    html += '   回复 ' + item.toUser.name;
                }
                html += '</div>';
                html += '<div style="word-break: break-all;white-space: normal;">';
                html += item.content;
                html += '</div>';
                html += "</div></div>";
                return html;
            }
        });
        table.render({
            elem: '#table-taskattach'
            , url: '../task/listattach'
            , height: 'full-308'
            , cols: [[
                {field: 'name', title: '标题', width: 'auto'}
            ]]
            , where: {
                taskId: taskId
            }
            , page: {
                layout: ['prev', 'next'],
                prev: '上一页',
                next: '下一页',
            }
            ,pageauto:true
            , cell: function (field, item) {
                var html = '<div class="title">' + item.fileName + '</div>';
                html += '<div class="layui-row">';
                html += '<div class="layui-col-md8">';
                html += workUtils.toDate(item.created, 'yyyy-MM-dd hh');
                html += '   By ' + item.userName;
                html += '</div>';
                html += '<div class="layui-col-md4  menu-bars">';
                html += '<a class="layui-btn layui-btn-danger layui-btn-xs taskattach-down" data-id="' + item.id + '">下载</a>';
                html += '</div>';
                html += '</div>';
                return html;
            }
        });
        table.render({
            elem: '#table-tasklog'
            , url: '../task/listlog'
            , height: 'full-308'
            , cols: [[
                {field: 'name', title: '标题', width: 'auto'}
            ]]
            , where: {
                projectId: workUtils.get("projectId"),
                taskId: taskId
            }
            , page: {
                layout: ['prev', 'next'],
                prev: '上一页',
                next: '下一页',
            }
            ,pageauto:true
            , cell: function (field, item) {
                var html = '';
                html += '<div class="layui-row">';
                html += '<div class="layui-col-md2">';
                html += '<img src="../photo/get/' + item.user.id + '"  class="layui-nav-img user-photo" style="width: 32px;height: 32px;">';
                html += '<div style="font-size: 12px;">' + item.user.name + '</div>';
                html += '</div>';
                html += '<div class="layui-col-md10" style="background-color: #fafafa;min-height: 47px;">';
                html += '<div style="font-size: 10px;">';
                html += workUtils.toDate(item.created, 'yyyy-MM-dd hh');
                html += '</div>';
                html += '<div style="word-break: break-all;white-space: normal;">';
                html += item.detail;
                html += '</div>';
                html += "</div></div>";
                return html;
            }
        });
    });

</script>